<template>
	<view class="index-content" style="background: white;">
		<!-- 搜索板块 -->
		<view class="index-header" style="top: 0;">
			<!-- #ifdef H5 -->
			<view class="login-view"
				style="align-items: center;display: flex;flex-direction: row; background:#ff3531; width: 100%; height: 100upx;">
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="login-view"
					style="padding-top: 50upx;align-items: center;display: flex;flex-direction: row; background:#ff3531; width: 100%; height: 150upx;">
					<!-- #endif -->
					<image src="../../static/img/common/logo.jpg" style="width: 60upx;height: 60upx;margin-left: 50upx;border-radius: 100upx;"
						@click="back('')"></image>
					<view class="index-search" style="width: 65%;margin-left: 40upx;">
						<view class="icon_search" @tap="goSearch">
							<text class="cuIcon cuIcon-search" style="margin-right: 12upx"></text>
							<text style="font-size: 30upx;">输入任务名称</text>
						</view>
					</view>
					<image src="../../static/img/my/upload.png" style="width: 40upx;height: 40upx;margin-left: 40upx;"
						@click="goNew('')"></image>
				</view>
			</view>
			<!-- <image lazy-load="true" src="../../static/12343.png" style="width: 100%;height: 300upx;position: absolute;">
			</image> -->
			<view style="position: relative;top: 0;padding-top: 20upx;">
				<!-- #ifdef H5 -->
				<view class="swiper" v-if="shareList[0]" v-show="shareList[0].value == '是'" style="margin-top: 100upx;">
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<view class="swiper" v-if="shareList[0]" v-show="shareList[0].value == '是'"
						style="margin-top: 150upx;">
						<!-- #endif -->
						<swiper class="swiper-container" :autoplay="true" :interval="4000" :circular="true"
							:indicator-dots="true" indicator-active-color="#e10a07" indicator-color="#cccccc"
							style="height: 320upx;">
							<block v-for="(item, index3) in banners" :key="index3">
								<swiper-item class="swiper-wrapper" @tap='toNavList(item.url)' v-if="item">
									<image lazy-load="true" fade-show="true" :src="item.imageUrl"
										style="width: 97%;height: 300upx;margin: 10upx 10upx 10upx 11upx;border-radius: 20upx;"
										mode="scaleToFill"></image>
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view>
				<!-- banner结束 -->


				<view class="category" v-if="shareList[1]">
					<view class="box">
						<swiper class="swiper" duration="300" :style="{ height: categoryHeight }"
							@change="categoryChange">
							<swiper-item v-for="(nav, index5) in bannerButtonList" :key="index5">
								<view class="category-list">
									<view class="icon" v-for="(item,ind) in nav" :key="ind" @tap='toNavList(item.url)'>
										<image mode="widthFix" :src="item.imageUrl"
											style="height: 90upx;width: 90upx;border-radius: 50upx;"></image>
										<view style="margin-top: 5upx;">{{ item.name }}</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
						<view class="dots">
							<view v-for="(page, pageindex) in bannerButtonList" :key="pageindex"
								:class="{ active: pageindex == currentPageindex }"></view>
						</view>
					</view>
				</view>

				<view class="view1" style="background-color: #FFFFFF;padding-bottom: 20upx;">
					<view v-if=" cashList.length > 0"
						style="display: flex;flex-direction: row;padding-bottom: 20upx;;margin-top: 20upx;">
						<image src="../../static/img/index/tongzhi.jpg"
							style="width: 30upx; height: 30upx;margin: 20upx 20upx 20upx 20upx;"></image>
						<view class="swiper">
							<swiper class="swiper-container" :circular="true" vertical="false" :autoplay="true"
								:interval="4000" :duration="1000" indicator-active-color="#e10a07"
								indicator-color="#cccccc" style="height: 50upx;width: 500upx;">
								<block v-for="(item, index3) in cashList" :key="index3">
									<swiper-item class="swiper-wrapper" v-if="item">
										<view
											style="align-content: center;font-size: 28upx;color: #999999; margin-top: 10upx;"
											@tap='toNavList(item.url)'>{{ item.title }}</view>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</view>

					<image v-if="banners3List[0] && shareList[2]&&shareList[2].value == '是'"
						@tap='toNavList(banners3List[0].url)' :src="banners3List[0].imageUrl"
						style="width: 100%; height: 160upx; padding-left: 20upx;padding-right: 20upx;"></image>
				</view>


				<!-- // todayHelpTaskCount  今日任务数
				// helpTaskPercent  较昨日
				// todayUserCount    今日用户数    
				// userPercent  较昨日
				// todayHelpTaskPrice  今日金额数    
				// helpTaskPricePercent  较昨日
				// todayOrderCount  今日成交数    
				// orderCountPercent  较昨日 -->



				<!-- <view class="view2">
					<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
						<view class="view2-view" style="display: flex;flex-direction: row;"
							v-for="(item, index) in tjList" :key="index">
							<view class="view2-view3" style="background-image: url(../../static/img/my/jinrirenwu.jpg);"
								v-if="index == 0">
								<view>{{item.name}}</view>
								<view style="margin-top: 10upx;">{{todayHelpTaskCount}}</view>
								<view style="margin-top: 10upx;">较昨日 {{helpTaskPercent}}%</view>
							</view>
							<view class="view2-view3"
								style="background-image: url(../../static/img/my/jinriyonghu.jpg);" v-if="index == 1">
								<view>{{item.name}}</view>
								<view style="margin-top: 10upx;">{{todayUserCount}}</view>
								<view style="margin-top: 10upx;">较昨日 {{userPercent}}%</view>
							</view>
							<view class="view2-view3" style="background-image: url(../../static/img/my/jinrijine.jpg);"
								v-if="index == 2">
								<view>{{item.name}}</view>
								<view style="margin-top: 10upx;">{{todayHelpTaskPrice}}</view>
								<view style="margin-top: 10upx;">较昨日 {{helpTaskPricePercent}}%</view>
							</view>
							<view class="view2-view3"
								style="background-image: url(../../static/img/my/jinrichengjiao.jpg);"
								v-if="index == 3">
								<view>{{item.name}}</view>
								<view style="margin-top: 10upx;">{{todayOrderCount}}</view>
								<view style="margin-top: 10upx;">较昨日 {{orderCountPercent}}%</view>
							</view>
						</view>
					</view>
				</view> -->


				<view v-if="shareList[3]" class="view2" v-show="shareList[3].value == '是'">
					<view style="font-size: 38upx; padding: 0upx 0 0 20upx; color: #000000;">精品服务</view>
					<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
						<view class="view2-view" style="display: flex;flex-direction: row;"
							v-for="(item, index) in JingPinList" :key="index">
							<image :src="item.imageUrl" class="view2-view2" @tap='toNavList(item.url)'></image>
						</view>
					</view>
				</view>

				<view style="font-size: 38upx; padding: 30upx 0 0 20upx; color: #000000;" v-if="zdList.length > 0">推荐任务
				</view>
				<view class="task-content" style="margin-top: 10upx;" v-if="zdList.length > 0">
					<view>
						<uni-list v-show="zdList.length > 0">
							<uni-list-item :show-arrow="false" v-for="(item, index) in zdList" :key="index">
								<view style="width: 100%;display: flex;" @click="taskItem(item.id)">
									<view style="width:76%;display: flex;">
										<image :src="item.label"
											style="border-radius: 100upx;width: 100upx;height: 100upx;background-size: 100%;">
										</image>
										<view style="width: 75%;margin-left: 20upx;">
											<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
												{{ item.title }}</view>
											<view
												style="width: 100%;font-size: 26upx;margin-top: 10upx;color: #999999;">
												ID:{{item.id}} <text
													style="margin-left: 20upx;">{{ item.endNum }}人已接，剩余{{ item.taskNum - item.endNum }}个</text>
											</view>
											<view v-if="item.tag"
												style="font-size: 24upx;background: #fff5f4;padding: 5upx 10upx;width: max-content;margin-top: 5upx;color: #ef5b05;border-radius: 10upx;">
												{{item.tag}}</view>
										</view>
									</view>
									<view style="width: 24%;text-align: right;">
										<view
											style="text-align: right;margin-left: 10upx;margin-top: 10upx;font-size: 38upx;color: #ef5b05;font-weight: 600;">
											<text style="font-size: 28upx;height: 50upx;">+</text>
											{{ item.taskOriginalPrice }}元
										</view>
										<image src="../../static/img/task/top.png"
											style="margin-left: 10upx;width: 40upx;height: 30upx;font-size: 20upx;;border-radius: 10upx;margin-right: 10upx;color: #FFFFFF;padding-left: 10upx;margin-top: 30upx;">
										</image>
									</view>
								</view>
							</uni-list-item>
						</uni-list>
					</view>
				</view>




				<view style="font-size: 38upx; padding: 30upx 0 0 20upx; color: #000000;" v-if="taskList.length > 0">
					热门任务</view>
				<view class="task-content" style="margin-top: 10upx;" v-if="taskList.length > 0">
					<view>
						<uni-list v-show="taskList.length > 0">
							<uni-list-item :show-arrow="false" v-for="(item, index) in taskList" :key="index">
								<view style="width: 100%;display: flex;" @click="taskItem(item.id)">
									<view style="width:76%;display: flex;">
										<image :src="item.label"
											style="border-radius: 100upx;width: 100upx;height: 100upx;background-size: 100%;">
										</image>
										<view style="width: 75%;margin-left: 20upx;">
											<view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
												{{ item.title }}
											</view>
											<view
												style="width: 100%;font-size: 26upx;margin-top: 10upx;color: #999999;">
												ID:{{item.id}} <text
													style="margin-left: 20upx;">{{ item.endNum }}人已接，剩余{{ item.taskNum - item.endNum }}个</text>
											</view>
											<view v-if="item.tag"
												style="font-size: 24upx;background: #fff5f4;padding: 5upx 10upx;width: max-content;margin-top: 5upx;color: #ef5b05;border-radius: 10upx;">
												{{item.tag}}
											</view>
										</view>
									</view>
									<view
										style="text-align: right;width: 24%;margin-left: 10upx;margin-top: 10upx;font-size: 38upx;color: #ef5b05;font-weight: 600;">
										<text style="font-size: 28upx;">+</text> {{ item.taskOriginalPrice }}元
									</view>
								</view>
							</uni-list-item>
						</uni-list>
					</view>
					<!-- 悬浮上拉 -->
					<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '', '']"
						style="bottom: 56px;"><text class="iconfont icon-shangla"></text></view>

					<!-- 加载更多提示 -->
					<view class="s-col is-col-24" v-if="taskList.length > 0">
						<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
					</view>
				</view>
			</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPageindex: 0,
				categoryHeight: '300rpx',
				taskList: [],
				rate: [],
				userState: '', 
				haowuList: [],
				banners: [],
				shareList: [],
				zdList: [],
				cashList: [],
				helpTaskPercent: '',
				helpTaskPricePercent: '',
				helpTaskPercent: '',
				orderCountPercent: '',
				todayHelpTaskCount: '',
				todayHelpTaskPrice: '',
				todayOrderCount: '',
				todayUserCount: '',
				userPercent: '',
				page: 1,
				size: 10,
				imageUrl: '../../static/img/common/logo.jpg',
				// logo: '../../static/img/mao.png',
				tjList: [{
						name: '今日 任务 数',
						jinri: '',
						zuori: ''
					},
					{
						name: '今日 用户 数',
						jinri: '',
						zuori: ''
					},
					{
						name: '今日 金额 数',
						jinri: '',
						zuori: ''
					},
					{
						name: '今日 成交 数',
						jinri: '',
						zuori: ''
					}
				],
				isInvitation: 0,
				JingPinList: [],
				scrollTop: false,
				banners3List: [],
				bannerButtonList: [],
				ClassifyList: [],
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onShow() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getUserInfo(userId);
			}
			let image_url = this.$queue.getData('image_url');
			// if (image_url && image_url !== 'undefined') {
			// 	this.imageUrl = image_url;
			// } else {
			// 	this.imageUrl = '../../static/img/common/logo.jpg';
			// }
			this.page = 1;
			this.zhidingList();
			this.tongjiList();
			this.selectTask('', 0);
			this.getSelectBanner(1);
			this.getSelectBanner(2);
			this.getSelectBanner(3);
			this.getSelectBanner(4);
			this.getClassifyList();
			this.getshouyeList();
			this.getCashList();
		},
		methods: {
			//首页统计
			tongjiList() {
				this.$Request.getT('/helpTask/selectHelpTaskStatistics').then(res => {
					if (res.code == 0) {
						// todayHelpTaskCount  今日任务数
						// helpTaskPercent  较昨日
						// todayUserCount    今日用户数    
						// userPercent  较昨日
						// todayHelpTaskPrice  今日金额数    
						// helpTaskPricePercent  较昨日
						// todayOrderCount  今日成交数    
						// orderCountPercent  较昨日

						this.helpTaskPercent = res.data.helpTaskPercent;
						this.helpTaskPricePercent = res.data.helpTaskPricePercent;
						this.orderCountPercent = res.data.orderCountPercent;
						this.todayHelpTaskCount = res.data.todayHelpTaskCount;
						this.todayHelpTaskPrice = res.data.todayHelpTaskPrice;
						this.todayOrderCount = res.data.todayOrderCount;
						this.todayUserCount = res.data.todayUserCount;
						this.userPercent = res.data.userPercent;
					}
				});
			},
			//置顶任务
			zhidingList() {
				this.$Request.getT('/helpTask/selectTopHelpTask?page=1&limit=5').then(res => {
					if (res.code == 0) {
						if (res.data && res.data.list) {
							this.zdList = res.data.list;
						}
					}
				});
			},
			//更新分类指示器
			categoryChange(event) {
				this.currentPageindex = event.detail.current;
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			//好物圈
			haowuquan() {
				this.$Request.getT('/commodity/selectCommodityList?page=1&limit=100').then(res => {
					if (res.code === 0) {
						this.haowuList = [];
						res.data.content.forEach(d => {
							d.itemsale = d.itemsale > 10000 ? '月销' + (d.itemsale / 10000).toFixed(1) +
								'万件' : '月销' + d.itemsale + '件';
							this.haowuList.push(d);
						});
					}
				});
			},
			getUserInfo(userId) {
				this.$Request.postJson('/app/selectUserById?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.userState = res.data.member;
					} else {
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: res.msg
						});
						this.$queue.logout();
					}
					uni.hideLoading();
				});
			},
			// 传进数组和指定个数，进行拆分
			chunk: function(array, size) {
				console.log("chunk array: ", array);
				//获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
				const length = array.length
				//判断不是数组，或者size没有设置，size小于1，就返回空数组
				if (!length || !size || size < 1) {
					return []
				}
				//核心部分
				let index = 0 //用来表示切割元素的范围start
				let resIndex = 0 //用来递增表示输出数组的下标

				//根据length和size算出输出数组的长度，并且创建它。
				let result = new Array(Math.ceil(length / size))
				//进行循环
				while (index < length) {
					//循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
					result[resIndex++] = array.slice(index, (index += size))
				}
				console.log("chunk result: ", result);
				//输出新数组
				return result
			},
			selectTask(type, index) {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				var userStateByMoney = 1;
				let userId = this.$queue.getData('userId');
				if (!userId) {
					userId = '-1';
				}
				this.$Request.getT('/helpTask/selectHelpTask?page=' + this.page + '&limit=' + this.size + '&sort=2' +
					'&userId=' +
					userId).then(res => {
					console.log("请求结果: ", res);
					if (res.code === 0) {
						if (this.page === 1) {
							this.taskList = [];
						}

						if (index === 0) {
							this.taskList = [];
						}

						for (var i = 0; i < res.data.pageUtils.list.length; i++) {

							if (res.data.pageUtils.list[i].classify === 1) {
								res.data.pageUtils.list[i].title = '【限安卓】' + res.data.pageUtils.list[i].title;
							} else if (res.data.pageUtils.list[i].classify === 2) {
								res.data.pageUtils.list[i].title = '【限苹果】' + res.data.pageUtils.list[i].title;
							}

							var jiaqian = res.data.pageUtils.list[i].taskOriginalPrice;
							var ping = res.data.ping.rate;
							var zhishu = res.data.zhishu.rate;
							var feizhishu = res.data.feizhishu.rate;
							res.data.pageUtils.list[i].taskOriginalPrice = this.numFilter(jiaqian - (jiaqian *
								ping + jiaqian * zhishu +
								jiaqian *
								feizhishu));
							this.taskList.push(res.data.pageUtils.list[i]);
						}

						if (res.data.pageUtils.list.length === this.size) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
					if (type === 'Refresh') {
						uni.stopPullDownRefresh(); // 停止刷新
					}
				});
			},
			numFilter(value) {
				// 截取当前数据到小数点后三位
				let tempVal = parseFloat(value).toFixed(3)
				let realVal = tempVal.substring(0, tempVal.length - 1)
				return realVal
			},
			ClassifyItem(item) {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: './classIfyItemTask?id=' + item.id,
					});
				} else {
					this.goLoginInfo();
				}
			},
			getClassifyList() {
				this.$Request.getT('/helpClassify/selectClassifyList').then(res => {
					if (res.code === 0) {
						this.ClassifyList = [];
						res.data.forEach(d => {
							this.ClassifyList.push(d);
						});
					}
				});
			},
			/**
			 * @param {Object} url
			 */
			toNavList: function(url) {
				console.log("url: "+'/package-task' + url);
				if (!url) return;
				let token = this.$queue.getData('token');
				console.log("token: ",token);
				if (token) {
					if (url.indexOf('/pages/') !== -1) {
						
						uni.navigateTo({
							url:'/package-task' + url,
							fail: (res) => {
								console.log("fail: ",res);
							}
						});
					} else {
						//#ifndef H5
						uni.navigateTo({
							url: '/pages/member/webview?url=' + url
						});
						//#endif
						//#ifdef H5
						window.location.href = url;
						//#endif
					}
				} else {
					console.log("login...: ");
					this.goLoginInfo();
				}
			},
			getCashList() {
				this.cashList = [];
				this.$Request.getT('/message/page/1/1/5').then(res => {
					console.log("message: ",res);
					if (res.code === 0) {
						if(res.data.list.length>0){
							res.data.list.forEach(d => {
								this.cashList.push(d);
							});
						}else{
							let item={
								url:'',
								title:'招财阿咪任务系统上线啦！！！'
							}
							this.cashList.push(item);
							this.cashList.push(item);
						}
						
					}
				});
			},
			getshouyeList() {
				this.$Request.getT('/common/type/condition/shouye').then(res => {
					console.log("getshouyeList: ", res);
					this.shareList = [];
					if (res.code === 0) {
						res.data.forEach(d => {
							this.shareList.push(d);
						});
					}
				});
			},
			goSearch() {
				uni.navigateTo({
					url: '../task/search'
				});
			},
			//统一登录跳转
			goLoginInfo() {
				this.$queue.setData('href', '/pages/index/index');
				uni.navigateTo({
					url: '/package-task/pages/public/login',
					fail: (err) => {
						console.log("err: ",err);
					}
				});
			},
			goMessage: function() {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '/pages/task/renwu'
					});
				} else {
					this.goLoginInfo();
				}
			},
			back(){
				uni.switchTab({
					url:'/pages/index/index',
					fail: (err) => {
						console.log("fail: ",err);
					}
				})
			},
			goNew(state) {
				let token = this.$queue.getData('token');
				if (token) {
					if (state) {
						uni.navigateTo({
							url: '../task/new?state=' + state
						});
					} else {
						uni.navigateTo({
							url: '../task/new'
						});
					}
				} else {
					this.goLoginInfo();
				}
			},
			taskItem(id) {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '../task/taskItem?id=' + id
					});
				} else {
					this.goLoginInfo();
				}
			},
			goTaskItem(id) {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: '../task/taskItem?id=' + id
					});
				} else {
					this.goLoginInfo();
				}
			},
			goTaskIndex() {
				let token = this.$queue.getData('token');
				if (token) {
					uni.switchTab({
						url: '../task/index'
					});
				} else {
					this.goLoginInfo();
				}
			},
			getSelectBanner(index) {
				this.$Request.getT('/banner/selectBannerList?classify=' + index + '&state=1').then(res => {
					console.log("selectBannerList: ", res);
					if (index === 1) {
						this.banners = [];
					} else if (index === 2) {
						var datanew = this.chunk(res.data, 10)
						this.bannerButtonList = datanew;
						console.log("this.bannerButtonList: ", this.bannerButtonList);
						// if (res.data.length > 5) {
						// 	this.categoryHeight = "300rpx"
						// } else {
						// 	this.categoryHeight = "150rpx"
						// }
						this.categoryHeight = "300rpx"
						this.addBannerButton()

						// this.bannerButtonList = [];
					} else if (index === 3) {
						this.banners3List = [];
					} else if (index === 4) {
						this.JingPinList = [];
					}

					if (res.code === 0) {
						res.data.forEach(d => {
							if (index === 1) {
								this.banners.push(d);
							} else if (index === 2) {
								// this.bannerButtonList.push(d);
							} else if (index === 3) {
								this.banners3List.push(d);
							} else if (index === 4) {
								this.JingPinList.push(d);
							}
						});
					}
				});
			},

			addBannerButton() {
				// let item = {
				// 	classify: 2,
				// 	createTime: "2021-08-02 13:48:27",
				// 	describes: "任务大厅",
				// 	id: 54,
				// 	imageUrl: "https://renwu.xiansqx.com/img/20210802/dd6af39e22f84c8c9c0e1d4b66019833.png",
				// 	name: "任务大厅",
				// 	sort: 1,
				// 	state: 1,
				// 	// url: "/package-task/pages/task/index",
				// 	url: "/pages/task/index",
				// }
				let list = [
					{
						classify: 2,
						createTime: "2021-08-02 13:48:27",
						describes: "任务大厅",
						id: 54,
						imageUrl: "https://renwu.xiansqx.com/img/20210802/dd6af39e22f84c8c9c0e1d4b66019833.png",
						name: "任务大厅",
						sort: 1,
						state: 1,
						// url: "/package-task/pages/task/index",
						url: "/pages/task/index",
					},
					{
						classify: 2,
						createTime: "2021-08-02 13:48:27",
						describes: "邀请赚钱",
						id: 54,
						imageUrl: "https://renwu.xiansqx.com/img/20210802/c0b6b1b037ea4405a4071733ae9fa0df.png",
						name: "邀请赚钱",
						sort: 1,
						state: 1,
						// url: "/package-task/pages/task/index",
						url: "/pages/invitation/index",
					}
				]
				this.bannerButtonList[0]=this.bannerButtonList[0].concat(list)
			}

		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.selectTask('', 1);
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.selectTask('Refresh', 1);
		}
	};
</script>

<style lang="scss">
	@import '../../static/css/index.css';
	@import '../../colorui/main.css';
	@import '../../colorui/icon.css';
	@import '../../static/css/common.css';
	@import '../../static/css/simplepro.css';

	.news_title {
		font-weight: bold;
		color: #F15B6C;
		margin-right: 32upx;
		margin-left: 32upx;
		width: 12upx;
	}

	.icon_search {
		background: #f6f6f6;
		border-radius: 22px;
		height: 69upx;
		line-height: 36px;
		font-size: 14px;
		color: #dcdcdc;
		text-align: left;
		text-indent: 17px;
		position: relative;
		z-index: 1;
		zoom: 1;
		transition: all 0.4s ease 0s;
		transform-origin: center;
	}

	.view2 {
		background-color: #ffffff;
		width: 100%;
		height: max-content;
		padding: 10upx;
		padding-bottom: 20upx;
	}

	.view3 {
		background-color: #ffffff;
		width: 100%;
		height: fit-content;
		margin-top: 30upx;
		margin-bottom: 20upx;
		padding-bottom: 20upx;
		padding: 10upx;
	}

	.view2-view2 {
		width: 330upx;
		height: 220upx;
		margin: 0upx 0 0 20upx;
		border-radius: 20upx;
		background-size: 100%;
		padding: 30upx 0 0 0upx;
	}

	.view2-view3 {
		width: 320upx;
		height: 150upx;
		color: #FFFFFF;
		// background: #FFF6F2;
		margin: 0upx 0upx 10upx 20upx;
		border-radius: 20upx;
		background-size: 100%;
		padding: 15upx;
	}

	.view3-view2 {
		width: 330upx;
		height: 170upx;
		margin: 30upx 0 0 30upx;
		border-radius: 20upx;
		background-color: #f5f5f5;
		padding: 35upx 0 0 20upx;
	}

	.category {
		width: 100%;

		.box {
			width: 100%;
			border-radius: 20upx;
			background-color: #ffffff;

			.dots {
				display: flex;
				justify-content: center;
				height: 15upx;
				width: 100%;

				view {
					width: 30upx;
					height: 5upx;
					background-color: rgba(0, 0, 0, 0.2);

					&.active {
						background-color: #ff570a;
					}
				}
			}

			.swiper {
				width: 100%;
				padding: 10upx 0;

				.uni-swiper-dot {
					width: 20upx;
				}

				.category-list {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: flex-start;
					flex-flow: wrap;

					.icon {
						width: 20%;
						display: flex;
						flex-flow: wrap;
						justify-content: center;
						font-size: 22upx;
						color: #666;
						margin-bottom: 20upx;

						image {
							width: 70%;
							height: 13.3vw;
						}

						view {
							width: 100%;
							display: flex;
							justify-content: center;
						}
					}
				}
			}
		}
	}
</style>
